// 查  查询所有的学员信息列表
function render() {
  // AJAX请求是异步的 下面不能直接获取 元素标签 要用事件委托
  axios.get('/student/list').then(({ data: res }) => {
    // console.log(res)
    const { code, message, data } = res

    document.querySelector('.table tbody').innerHTML = res.data.map(item => {
      return `
     <tr>
        <th scope="row">${item.id}</th>
        <td>${item.name}</td>
        <td>${item.age}</td>
        <td>${item.sex}</td>
        <td>${item.group}</td>
        <td>${item.phone}</td>
        <td>${item.salary}</td>
        <td>${item.truesalary}</td>
        <td>${item.province}${item.city}${item.county}</td>
        <td>
          <button type="button" class="btn btn-primary btn-sm"data-id='${item.id}'>修改</button>
          <button type="button" class="btn btn-danger btn-sm" data-id='${item.id}'>删除</button>
        </td>
      </tr>
    `
    }).join('')
  })
}
render()

//删： 删除学员
document.querySelector('.table tbody').addEventListener('click', function (e) {
  console.log(e)
  const { tagName, dataset, textContent } = e.target
  if (tagName === 'BUTTON' && textContent === '删除') {
    //1.确定提示框
    if (!confirm('您确定要删除吗？')) return
    axios.delete('/student/delete', { params: { id: dataset.id } }).then(({ data: res }) => {
      console.log(res)
      if (res.code === 0) {
        toastr.info('删除成功')
        render()
      }
    })
  }
  //改 先获取原来的数据 ，在提交到服务器
  if (tagName === 'BUTTON' && textContent === '修改') {
    // 获取id号对应的学员的信息
    axios.get('/student/one', { params: { id: dataset.id } }).then(({ data: res }) => {
      console.log(res)
      const { code, message, data } = res
      if (code === 0) {
        // 数据回填
        document.querySelector('#updateModal [name=name]').value = data.name
        document.querySelector('#updateModal [name=age]').value = data.age
        document.querySelector('#updateModal [name=phone]').value = data.phone
        document.querySelector('#updateModal [name=salary]').value = data.salary
        document.querySelector('#updateModal [name=truesalary]').value = data.truesalary
        // 处理group下拉框
        document.querySelector('#updateModal [name=group]').value = data.group
        // 处理radius 
        const rds = document.querySelectorAll('#updateModal [name=sex]')
        for (let i = 0; i < rds.length; i++) {
          if (rds[i].value === data.sex) {
            rds[i].checked = true  //如果值相同就被选中
          }
        }
        // 处理省市县数据

        // 把添加的数据先渲染上去 ，之后再做修改
        document.querySelector('#updateModal [name=province]').value = data.province
        document.querySelector('#updateModal [name=city]').innerHTML = `<option  value="${data.city}">${data.city}</option>`
        document.querySelector('#updateModal [name=county]').innerHTML = `<option  value="${data.county}">${data.county}</option>`


        // 修改省市县数据
        document.querySelector('#updateModal [name=province]').addEventListener('change', function () {
          console.log(this.value)
          const pname = this.value
          if (!pname) return
          axios.get('/geo/city', { params: { pname } }).then(({ data: res }) => {
            console.log(res)
            let str = '<option value="">--市--</option>'
            res.forEach(item => {
              str += ` <option value="${item}">${item}</option>`
            })
            document.querySelector('#updateModal [name=city]').innerHTML = str
          })
        })
        document.querySelector('#updateModal [name=city]').addEventListener('change', function () {
          console.log(this.value)
          const pname = document.querySelector('#updateModal [name=province]').value
          const cname = this.value
          if (pname === '' || cname === '') return
          axios.get('/geo/county', { params: { pname, cname } }).then(({ data: res }) => {
            console.log(res)
            let str = '<option  value="">--县--</option>'
            res.forEach(item => {
              str += ` <option  value="${item}">${item}</option>`
            })
            document.querySelector('#updateModal [name=county]').innerHTML = str
          })
        })


        $('#updateModal').modal('show')
        // document.querySelector('#updateModal').modal('show')
        document.querySelector('#updateModal form').addEventListener('submit', function (e) {
          e.preventDefault()
          // 1.收集数据
          const id = dataset.id
          const name = document.querySelector('#updateModal [name=name]').value
          const sex = document.querySelector('#updateModal [name=sex]:checked').value   //  默认选择点击的值
          const age = document.querySelector('#updateModal [name=age]').value
          const group = document.querySelector('#updateModal [name=group]').value
          const phone = document.querySelector('#updateModal [name=phone]').value
          const salary = document.querySelector('#updateModal [name=salary]').value
          const truesalary = document.querySelector('#updateModal [name=truesalary]').value
          const province = document.querySelector('#updateModal [name=province]').value
          const city = document.querySelector('#updateModal [name=city]').value
          const county = document.querySelector('#updateModal [name=county]').value
          // 2.验证表单




          // 3.发送post 请求
          // 3.1关闭添加模态框
          // 3.2渲染
          const data = `name=${name}&sex=${sex}&age=${age}&group=${group}&phone=${phone}&salary=${salary}&truesalary=${truesalary}&province=${province}&city=${city}&county=${county}&id=${id}`
          axios.put('/student/update', data).then(({ data: res }) => {
            console.log(res)
            if (res.code === 0) {
              toastr.success('修改成功')
              $('#updateModal').modal('hide')
              render()
            }
          })
        })
      }

    })
  }
})



//增：
// 省市县三级联动效果
//1.获取省份信息

axios.get('/geo/province').then(({ data: res }) => {
  console.log(res)

  // 这里用字符串拼接  因为有一个默认选择的选项  用map方法不行
  let str = '<option selected value="">--省--</option>'
  res.forEach(item => {
    str += ` <option  value="${item}">${item}</option>`
  })
  document.querySelector('#addModal [name=province]').innerHTML = str
  document.querySelector('#updateModal [name=province]').innerHTML = str
  console.log(str)
})
// 2.根据省的信息在选择市
// 监听省的改变事件  获取是的值
document.querySelector('#addModal [name=province]').addEventListener('change', function () {
  console.log(this.value)
  const pname = this.value
  if (!pname) return
  axios.get('/geo/city', { params: { pname } }).then(({ data: res }) => {
    console.log(res)
    let str = '<option value="">--市--</option>'
    res.forEach(item => {
      str += ` <option value="${item}">${item}</option>`
    })
    document.querySelector('#addModal [name=city]').innerHTML = str
  })
})
// 3.根据市的信息在选择县
// 监听市的改变事件   获取县的值
document.querySelector('#addModal [name=city]').addEventListener('change', function () {
  console.log(this.value)
  const pname = document.querySelector('#addModal [name=province]').value
  const cname = this.value
  if (pname === '' || cname === '') return
  axios.get('/geo/county', { params: { pname, cname } }).then(({ data: res }) => {
    console.log(res)
    let str = '<option  value="">--县--</option>'
    res.forEach(item => {
      str += ` <option  value="${item}">${item}</option>`
    })
    document.querySelector('#addModal [name=county]').innerHTML = str
  })
})


document.querySelector('#addModal .add-form').addEventListener('submit', function (e) {
  e.preventDefault()
  // 1.收集数据
  const name = document.querySelector('#addModal [name=name]').value
  const sex = document.querySelector('#addModal [name=sex]:checked').value   //  默认选择点击的值
  const age = document.querySelector('#addModal [name=age]').value
  const group = document.querySelector('#addModal [name=group]').value
  const phone = document.querySelector('#addModal [name=phone]').value
  const salary = document.querySelector('#addModal [name=salary]').value
  const truesalary = document.querySelector('#addModal [name=truesalary]').value
  const province = document.querySelector('#addModal [name=province]').value
  const city = document.querySelector('#addModal [name=city]').value
  const county = document.querySelector('#addModal [name=county]').value
  // 2.验证表单




  // 3.发送post 请求
  // 3.1关闭添加模态框
  // 3.2渲染
  const data = `name=${name}&sex=${sex}&age=${age}&group=${group}&phone=${phone}&salary=${salary}&truesalary=${truesalary}&province=${province}&city=${city}&county=${county}`
  axios.post('/student/add', data).then(({ data: res }) => {
    console.log(res)
    if (res.code === 0) {
      toastr.success('添加成功')
      $('#addModal').modal('hide')
      render()
    }
  })
})





